<template>
	<view class="content-container">
		<view class="trade-item" v-for="(item, index) in competition" :key="index" @click="goToDetail(item)">
			<view class="trade-content-wrapper">
				<image :src="getImageUrl(item.image)" mode="aspectFill" class="trade-image"></image>

				<view class="trade-info-container">
					<view class="trade-header">
						<text class="trade-title">{{item.title}} </text>
						<view class="trade-tag">
							<text>冠军</text>
							<text>{{item.honorprice}}元</text>
						</view>
					</view>
					<text class="trade-desc">{{item.club}}</text>
					<text class="trade-info">地址: {{item.fullAddress}}</text>
					<text class="trade-info">时间: {{item.data}} {{item.time}}</text>
					<text class="trade-contact">联系方式: {{item.contactName || '暂无'}}</text>
				</view>
			</view>
		</view>

		<view v-if="competition.length === 0" class="empty-container">
			<text>暂无赛事</text>
		</view>






		<view class="sign">
			<view class="sign-header">
				<text class="sign-first">第一场</text>
			</view>

			<view class="sign-content">
				<view class="sign-bottem">
					<text class="sign-info">开始时间：{{competition[0]?.data ||'2025-02-03'}}
						{{competition[0]?.time||'23:46'}}</text>
					<text class="sign-info">报名：{{competition[0].userprice}}元</text>
				</view>

				<button class="submit-button" @click="signOrder">报名</button>
			</view>
		</view>
	</view>

	<view class="information-container" v-if="informationb" @click="informationa">
		<!-- <view class="information-content">
				
			</view> -->

		<view class="information-title">请输入您的姓名、电话，以便举办方联系您</view>

		<view class="information-text">
			<text class="user-information">姓名</text>
			<input class="information-input" v-model="name" placeholder="请输入您的姓名" />
		</view>

		<view class="information-text">
			<text class="user-information">手机号</text>
			<input class="information-input" v-model="phone" placeholder="请输入您的电话号码" />
		</view>

		<view class="uni-px-5 uni-pb-5">
			<!-- <view class="text">单选选中：{{JSON.stringify(radio1)}}</view> -->
			<text class="user-information">性别</text>
			<uni-data-checkbox selectedColor="#fdad18" selectedTextColor="#fdad18" v-model="radio1"
				:localdata="sex"></uni-data-checkbox>
		</view>


		<view class="information-button">
			<button @click="submitInformation" class="yes">确认</button>
			<button @click="cancelInformation" class="no">取消</button>
		</view>
	</view>



</template>

<script>
	export default {
		data() {
			return {
				competition: [],
				informationb: false,
				name: '',
				phone: '',
				radio1: 0,
				sex: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],


			};
		},
		methods: {
			// getCompetition() {
			// 	this.token = uni.getStorageSync('token');
			// 	this.$http.get("https://billiards.cqtrust.cn/local_trades")
			// 		.then((res) => {
			// 			console.log(res);
			// 			const {
			// 				code,
			// 				msg,
			// 				data
			// 			} = res;
			// 			uni.showToast({
			// 				title: msg,
			// 				icon: 'none'
			// 			});
			// 			if (code === 1 || code === 200) {
			// 				if (data && data.length > 0) {
			// 					this.competition = data;
			// 					console.log(data);



			// 				}
			// 				return Promise.resolve(true);
			// 			}
			// 			return Promise.reject(false);
			// 		})
			// 		.catch((res) => {
			// 			console.log(res);
			// 			return Promise.reject(false);
			// 		});
			// },

			// 处理图片URL
			getImageUrl(imagePath) {
				if (!imagePath) return '/static/renwu/taiqiu.png';

				if (imagePath.startsWith('http')) return imagePath;

				return `https://billiards.cqtrust.cn${imagePath}`;
			},

			goToDetail(item) {
				uni.navigateTo({
					url: `/pages/my/honor/xingqing/xiangqing/?id=${item.id}`,
					success: () => {
						uni.setStorageSync('currentProduct', item);
					}
				});
			},

			signOrder() {
				// const token = getStorageSync('token');
				// if(!token){
				// 	uni.navigateTo({
				// 		url:'/pages/my/user/index?redirect=' + encodeURIComponent('/' + getCurrentPages()[0].route)
				// 	});
				// return;
				// }
				this.informationb = true;
				
				
			},
			
			submitInformation(){
				if(!this.name ||!this.phone){
					uni.showToast({
										title: '请输入姓名和手机号',
										icon: 'none'
									});
									return;
				}
				
				//关闭弹窗
				this.informationb = false;
				
				//支付
				this.wechatPay();
			},
			
			//取消
			cancelInformation() {
						this.informationb = false;
					},
			
			//微信支付
			wechatPay(){
				
			},
			// getInformation(){
			// 	if(!this.name||!this.phone){
			// 		uni.showToast({
			// 			title:'请输入详细信息',
			// 			icon:none
			// 		});
			// 	}
			// 	return;

			// 	this.$http.get("https://billiards.cqtrust.cn/workers_admin", {

			// 			work_city: this.queryParams.work_city,

			// 		})
			// 		.then((res) => {
			// 			console.log(res);
			// 			const {
			// 				code,
			// 				msg,
			// 				data
			// 			} = res;
			// 			uni.showToast({
			// 				title: msg,
			// 				icon: "none",
			// 			});
			// 			if (code == 1 || code == 200) {
			// 				if (data && data.length > 0) {
			// 					this.localMasters = data;
			// 					console.log(data);
			// 				}
			// 				return Promise.resolve(true);
			// 			}
			// 			return Promise.reject(false);
			// 		})
			// 		.catch((res) => {
			// 			console.log(res);
			// 			return Promise.reject(false);
			// 		});

			// 	// 提交成功
			// 	        this.informationb = false;
			// 	        uni.showToast({
			// 	            title: '报名成功',
			// 	            icon: 'success'
			// 	        });
			// },



		},
		// 模拟数据
		created() {
			setTimeout(() => {
				this.competition = [{
					id: 1,
					image: '/static/products/cloth1.jpg',
					title: '专业比赛',
					honorprice: '100',
					club: '某台球俱乐部',
					fullAddress: '重庆市某某区某某路',
					data: '2023-10-01',
					time: '14:00',
					contactName: '1111111'
				}];
			}, 1000); // 延迟1秒模拟网络请求
		},
		// onLoad() {
		// 	this.$http.get("/users", {}).then((res) => {
		// 		console.log(res);
		// 	});
		// },

	}
</script>

<style>
	.content-container {
		padding: 20rpx;
		background-color: #fff;
	}

	.trade-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.trade-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.trade-title {
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}

	.trade-tag {
		display: flex;
		align-items: center;
	}

	.trade-tag text {
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #ffaa00;
	}

	.trade-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.trade-info {
		display: block;
		font-size: 26rpx;
		color: #888;
		margin-bottom: 5rpx;
	}

	.trade-contact {
		display: block;
		font-size: 26rpx;
		color: #333;
		margin-top: 10rpx;
	}

	.trade-content-wrapper {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.trade-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.trade-info-container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.topbar {
		width: 100%;
		height: auto;
		background-color: #EEEEEE;
	}

	.empty-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 200rpx;
		font-size: 28rpx;
		color: #999;
	}


	.sign {
		position: fixed;
		bottom: 90rpx;
		left: 20rpx;
		right: 20rpx;
		width: auto;
		border-radius: 10rpx;
		border: 3rpx solid #ffaa00;
		margin-top: 40rpx;
		overflow: hidden;
		/* 保圆角效果不被子元素破坏 */
	}

	.sign-header {

		background-color: #fde8ce;
		padding: 15rpx 20rpx;
		text-align: center;
	}

	.sign-first {

		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.sign-content {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20rpx;
		background-color: #fff;
	}

	.sign-bottem {
		padding: 10rpx;

	}


	.sign-info {
		display: block;
		font-size: 30rpx;
		color: #888;
		margin-bottom: 10rpx;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {

		padding-left: 0;

		padding-right: 5px;
	}

	.uni-pb-5 {
		padding-bottom: 5px;
	}

	.submit-button {
		width: 20%;
		background-color: #ffaa00;
		margin-right: 5rpx;
		font-size: 32rpx;
		border-radius: 30rpx;
		border: none;
		color: white;
	}


	.information-container {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		background: #fff;
		border-radius: 16rpx;
		padding: 15rpx 30rpx;
		z-index: 999;
		box-sizing: border-box;
	}


	.information-title {
		font-size: 25rpx;
		color: #333;
		text-align: center;
		margin-bottom: 10rpx;
		font-weight: 500;
	}


	.information-text {
		margin-bottom: 10rpx;
	}


	.user-information {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.information-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 8rpx;
		padding: 0 15rpx;
		font-size: 25rpx;
		box-sizing: border-box;
	}


	.uni-section {
		margin: 9rpx 0;
	}


	.information-button {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}


	.information-button button {
		width: 48%;
		height: 70rpx;
		/* border-radius: 40rpx; */
		font-size: 30rpx;
		border: none;
	}


	.yes {
		background: #f5f5f5;
		color: #666;
	}


	.no {
		background: #f5f5f5;
		color: #666;
	}
</style>